<!DOCTYPE html>
<html lang="en">
{% include 'navbar.html' %}
<head>
    <style>
        body{
            background: rgb(247, 248, 249);
        }
        .col-md-11 {
            margin-left: auto;
            margin-right: auto;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 25pt;
            padding: 15pt 10pt 10pt 20pt;
        }
    </style>
    <meta charset="UTF-8">
    <title>Reservations</title>
</head>
<body onload="onload()">
<div class="container">
    <div class="row justify-content-center">
        <div>
            <h1 class="mt-2" style="color: rgb(54,151,212)">Reservations</h1>
            <hr class="mt-0 mb-4">

        </div>
    </div>
</div>
{% if all_reservations %}
<div class="row justify-content-center" style="margin-bottom: 15pt">
    <button class="btn btn-secondary" id="past_button" onclick="past_reservations()">Past reservations
    </button>
    <button class="btn btn-secondary" onclick="all_reservations()" style="margin-left: 5pt;margin-right: 5pt"
            id="all_button">All reservations
    </button>
    <button class="btn btn-secondary" id="future_button" onclick="future_reservations()">Future reservations
    </button>
</div>

<div class="col-md-11">
    <table class="table" style="text-align: center">
        <thead class="thead-light" style="color: black">
        <tr>
            <th scope="col">#</th>
            <th scope="col">Number of reservation</th>
            <th scope="col">Arrival</th>
            <th scope="col">Departure</th>
            <th scope="col">Number of room</th>
            <th scope="col">Price of reservation</th>
            <th scope="col">Actions</th>
        </tr>
        </thead>
        <tbody>
        {% for reservation in all_reservations %}
            <tr class="class_reservation">
                <th scope="row" class="lp"></th>
                <td style="color: black;">{{ reservation.id }}</td>
                <td class="class_start" style="color: black;">{{ reservation.start_reservation }}</td>
                <td class="class_end" style="color: black;">{{ reservation.end_reservation }}</td>
                <td style="color: black;">{{ reservation.id_room.number }}</td>
                <td style="color: black;">{{ reservation.price_reservation }}</td>
                <form>{% csrf_token %}
                    <td>
                        <button type="submit" class="btn btn-light" formmethod="post"
                                formaction="/room/reservations/delete/{{ reservation.id }}/">Delete
                        </button>
                    </td>
                </form>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="container">
    <div class="row justify-content-center">
        <div>
            <h2 class="mt-2" style="color: rgb(54,151,212)">No reservations yet</h2>

        </div>
    </div>
</div>
{% endif %}
<script>
    function sort_index() {
        var index = 1;
        var lp = document.getElementsByClassName('lp');
        var cl_reser = document.getElementsByClassName('class_reservation');
        var start = document.getElementsByClassName('class_start');
        var end = document.getElementsByClassName('class_end');
        for (var i = 0; i < lp.length; i++) {
            if (cl_reser[i].style.display === '') {
                lp[i].innerHTML = index;
                start[i].innerHTML = start[i].innerHTML.replace(/-/g, "").substr(0, 4) + '-' + start[i].innerHTML.replace(/-/g, "").substr(4, 2) + '-' + start[i].innerHTML.replace(/-/g, "").substr(6, 2);
                end[i].innerHTML = end[i].innerHTML.replace(/-/g, "").substr(0, 4) + '-' + end[i].innerHTML.replace(/-/g, "").substr(4, 2) + '-' + end[i].innerHTML.replace(/-/g, "").substr(6, 2);
                index++;
            }
        }
    }

    function yesno() {
        if (confirm('Are you sure?'))
            console.log('Niestety usunąłeś');
    }

    function reverse_display() {
        var cl_reser = document.getElementsByClassName('class_reservation');
        for (var i = 0; i < cl_reser.length; i++) {
            if (cl_reser[i].style.display === 'none')
                cl_reser[i].style.display = '';
            else
                cl_reser[i].style.display = 'none';
        }
        sort_index()
    }

    function past_reservations() {
        var butt1 = document.getElementById('past_button').disabled = 'true';
        var butt2 = document.getElementById('all_button').disabled = '';
        var butt3 = document.getElementById('future_button').disabled = '';
        sortdate();
        reverse_display();
    }

    function future_reservations() {
        var butt1 = document.getElementById('past_button').disabled = '';
        var butt2 = document.getElementById('all_button').disabled = '';
        var butt3 = document.getElementById('future_button').disabled = 'true';
        sortdate();
    }

    function all_reservations() {
        var butt1 = document.getElementById('past_button').disabled = '';
        var butt2 = document.getElementById('all_button').disabled = 'true';
        var butt3 = document.getElementById('future_button').disabled = '';
        sortdate('low');
        sort_index();
    }

    function sortdate(value = 'growing') {
        var Now = new Date();
        var intFormatDate = Now.toISOString().slice(0, 10).replace(/-/g, "");
        var cl_reser = document.getElementsByClassName('class_reservation');
        for (var i = 0; i < cl_reser.length; i++) {
            if (cl_reser[i].getElementsByClassName('class_end')[0].innerHTML.replace(/-/g, "") < intFormatDate && value === 'growing') {
                cl_reser[i].style.display = 'none';
            } else if (cl_reser[i].getElementsByClassName('class_end')[0].innerHTML.replace(/-/g, "") === intFormatDate) {
                {#cl_reser[i].style.backgroundColor = 'rgba(255,255,0,0.6)'; //yellow#}
                cl_reser[i].style.background='linear-gradient(to bottom, khaki 10%, yellow 100%)';
                cl_reser[i].style.display = '';
            } else if (cl_reser[i].getElementsByClassName('class_start')[0].innerHTML.replace(/-/g, "") === intFormatDate) {
                {#cl_reser[i].style.backgroundColor = 'rgba(0, 255, 0,0.6)'; //green#}
                cl_reser[i].style.background='linear-gradient(to bottom, palegreen 10%, green 100%)';
                cl_reser[i].style.display = '';
            } else if (cl_reser[i].getElementsByClassName('class_end')[0].innerHTML.replace(/-/g, "") > intFormatDate &&cl_reser[i].getElementsByClassName('class_start')[0].innerHTML.replace(/-/g, "") < intFormatDate) {
                {#cl_reser[i].style.backgroundColor = 'rgba(255, 80, 80,0.6)'; //red#}
                cl_reser[i].style.background='linear-gradient(to bottom, tomato 10%, red 100%)';
                cl_reser[i].style.display = '';
            } else {
                cl_reser[i].style.display = '';
            }
        }
        sort_index();
    }

    function onload() {
        {% if msg %}
            alert('{{ msg }}');
        {% endif %}
        sortdate();
        var butt3 = document.getElementById('future_button').disabled = 'true';
    }
</script>
</body>
</html>